Rails Webpacker Vue配置Stylus

发表于 | 分类于 |

Rails + webpacker + vue项目，组件里如何使用stylus呢？

  1. 增加依赖：

    1
    $ yarn add stylus stylus-loader mini-css-extract-plugin

  2. 新增文件config/webpack/loaders/stylus.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    module.exports = {
      test: /\.styl(us)?$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'stylus-loader'
      ]
    }

  3. 编辑文件config/webpack/environment.js，添加这两行代码：

    image-20190906192929555

  4. 编辑config/webpacker.yml:

    image-20190906193011465

完成，重启一下serve

可以愉快的在组件里使用stylus了。